<template>
	<view class="index-content">
		<view class="info-content">
			<view class="content-top"  @click="hanldeLabel()">
				<view class="image-box">
					<image src="../../../static/label.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="text-box">标签管理</view>
			</view>
			<view class="middle-top">
				<view class="middle-text-box">
					<div class="middle-text-box-info">
						<div class="middle-image-box">
							<image src="../../../static/record.png" style="width: 100%;height: 100%;"></image>
						</div>
						<div>记录查询</div>
					</div>
				</view>
			</view>
			<view class="middle-top" @click="hanldeAccount()">
				<view class="middle-text-box">
					<div class="middle-text-box-info">
						<div class="middle-image-box">
							<image src="../../../static/account.png" style="width: 100%;height: 100%;"></image>
						</div>
						<div>账号管理</div>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//屏幕高度
				screenHeight: 0,
			}
		},
		onLoad() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			hanldeLabel() {
				uni.navigateTo({
					url: "/pages/tabbar/labelAdjustment/labelAdjustment"
				})
			},
			hanldeAccount(){
				uni.navigateTo({
					url: "/pages/tabbar/account/account"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F4;
		font-size: 18px;
	}

	.index-content {
		width: 100%;
		height: 200px;
		background-image: linear-gradient(180deg, #4899F3 0%, rgba(72, 153, 243, 0.00) 100%);
	}

	.info-content {
		padding: 10px;
	}

	.content-top {
		width: 100%;
		height: 232px;
		background: #FFFFFF;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-box {
		width: 120px;
		height: 120px;
	}

	.text-box {
		margin-top: 12px;
	}

	.middle-top {
		width: 100%;
		background: #FFFFFF;
		border-radius: 4px;
		margin-top: 10px;
	}

	.middle-text-box {
		width: 100%;
		height: 56px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.middle-text-box-info {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.middle-image-box {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}
</style>
